<template>
    <view>
        <web-view src="http://10.152.164.194:5173/exam?id=7" @load="bindload"></web-view>
        <!-- <span v-for="(item, index) in list">
          <rich-text :nodes="item.topicName"></rich-text>
          <span class="inline-block input-wrapper">
            <span class="inline-block input-wrapper">
              <input class="input-box" />
            </span>
          </span>
        </span> -->

        <!-- <span v-for="(item, index) in conts">
            <template v-for="(name, inx) in item.itemList">
                <span v-if="name">
                    {{ name }}
                    <div v-if="item.itemList && inx < (item.itemList.length-1)"></div>
                </span>
            </template>
            <span style="display: inline-block; width: 50px;">
                <span style="display: inline-block; width: 50px;">
                    <input style="border: 1px solid red; width: 60rpx;" />
                </span>
            </span>
        </span> -->
        <!-- <div style="display: math;" v-html="item.topicName"></div><input style="border: 1px solid red; width: 60rpx;" /> -->
        <!-- <view class="">
            <div style="display: math;" v-html="item.topicName"></div><input style="border: 1px solid red; width: 60rpx;" />
        </view> -->
    </view>
</template>

<script>
    export default {
        data() {
            return {
                nodes: [{
                    name: 'div',
                    attrs: {
                        class: 'div_class',
                        style: 'line-height: 60px; color: red;'
                    },
                    children: [{
                        attrs: {
                            class: 'div_class',
                            style: 'line-height: 60px; color: red;'
                        },
                        type: 'text',
                        text: 'You never know what you re gonna get.You never know what you re gonna get.You never know what you re gonna get.You never know what you re gonna get.'
                    }]
                }, ],
                conts: [],
                list: [{
                        "topicId": 1,
                        "packList": null,
                        "topicName": "Example<br>\nName:Jenny Chan<br>  \nPresent address: Sea View Guest House, ",
                        "rightAnswer": "14 Hill Road",
                        "userCode": "",
                        "answer": "111",
                        "orderNum": 1,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "数字辨析不熟练，可以通过听读数字来重点提升对于数字的快速反应能力；\r\n认知词汇量不够、或对听力词汇不够熟悉，对听力词汇的听拼能力有待提升。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 2,
                        "packList": null,
                        "topicName": "\nDaytime phone number: 2237676<br>\n[NB Best time to contact is ",
                        "rightAnswer": "between 9 and 9.30@between 9 and 9:30@9-9.30@9-9:30",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 2,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "数字类信息辨析不熟练，可以通过听读数字来重点提升对于数字的快速反应能力；\r\n答案获取不完整，应在定位之后对相关内容进行更全面的关注。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 3,
                        "packList": null,
                        "topicName": "]<br>\nAge: 19<br>\nIntended length of stay: ",
                        "rightAnswer": "1 year",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 3,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "过度依赖单一答题技巧，应结合综合做题方法解决问题；\r\n未排除干扰信息，需进一步学习本类考点的出题思路和做题方法。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 4,
                        "packList": null,
                        "topicName": "<br>\nOccupation while in UK: student<br>\nGeneral level of English: ",
                        "rightAnswer": "intermediate",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 4,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "认知词汇量不够、或对听力词汇不够熟悉，对听力词汇的听拼能力有待提升。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 5,
                        "packList": null,
                        "topicName": "<br>\nPreferred location: in the ",
                        "rightAnswer": "North-West",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 5,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "未排除干扰信息，需进一步学习本类考点的出题思路和做题方法。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 6,
                        "packList": null,
                        "topicName": "<br>\nSpecial diet: ",
                        "rightAnswer": "vegetarian",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 6,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "认知词汇量不够、或对听力词汇不够熟悉，对听力词汇的听拼能力有待提升。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 7,
                        "packList": null,
                        "topicName": "<br>\nOther requirements: own facilities<br>\r\n&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; own television<br>\r\n&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; ",
                        "rightAnswer": "garden@real garden@a real garden",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 7,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "对解题方法技巧了解不够，需进一步学习本类考点的出题思路和做题方法。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 8,
                        "packList": null,
                        "topicName": "<br>\r\n&emsp; &emsp; &emsp; &emsp; &emsp; &emsp; &emsp; to be ",
                        "rightAnswer": "only guest@the only guest",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 8,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "未排除干扰信息，需进一步学习本类考点的出题思路和做题方法；\r\n对解题方法技巧了解不够，需进一步学习本类考点的出题思路和做题方法。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 9,
                        "packList": null,
                        "topicName": "<br>\nMaximum price: ￡",
                        "rightAnswer": "100",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 9,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "数字类信息辨析不熟练，可以通过听读数字来重点提升对于数字的快速反应能力；\r\n未排除干扰信息，需进一步学习本类考点的出题思路和做题方法。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": 10,
                        "packList": null,
                        "topicName": " a week<br>\nPreferred starting date:  ",
                        "rightAnswer": "23rd March@Monday 23rd March",
                        "userCode": "",
                        "answer": "",
                        "orderNum": 10,
                        "isInput": 1,
                        "isRight": 0,
                        "optionList": null,
                        "analysis": "数字类信息辨析不熟练，可以通过听读数字来重点提升对于数字的快速反应能力；\r\n未排除干扰信息，需进一步学习本类考点的出题思路和做题方法。",
                        "optionOrderNum": null,
                        "checkTopics": null
                    },
                    {
                        "topicId": null,
                        "packList": null,
                        "topicName": "",
                        "rightAnswer": null,
                        "userCode": null,
                        "answer": null,
                        "orderNum": null,
                        "isInput": null,
                        "isRight": null,
                        "optionList": null,
                        "analysis": null,
                        "optionOrderNum": null,
                        "checkTopics": null
                    }
                ]
            }
        },
        onLoad() {
            this.conts = this.famateContent(this.list)
        },
        methods: {
            bindload() {
               
            },
            famateContent(conts) {
                let arr = []
                conts.forEach((item, index) => {
                    arr = item.topicName.split('<br>')
                    item.itemList = arr
                })
                return conts
            }
        }
    }
</script>

<style scoped>
    .inline-container {
        display: flex;
        align-items: center;
    }

    .other-div {
        margin-left: 10px;
        /* 设置其他 div 元素与 rich-text 之间的间距 */
    }

    view {
        /* overflow-wrap: break-word; */
    }

    rich-text {
        display: inline-block;
    }

    .div_class {
        display: inline-block;
    }

    .content {
        display: inline-block;
        margin-right: 10px;
        /* 调整内容之间的间距 */
    }

    .inline-block {
        display: inline-block;
    }

    .input-wrapper {
        display: inline-block;
        width: 50px;
    }

    .input-box {
        display: inline-block;
        border: 1px solid red;
        width: 60rpx;
    }
</style>